<template>
	<div>
		<!--缓存的页面-->
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive" class="main-router-view">
			</router-view>
		</keep-alive>
		<!--不缓存的页面-->
		<router-view v-if="!$route.meta.keepAlive" class="main-router-view">
		</router-view>
		<!--下方的TabBar-->
		<!-- <van-tabbar v-if="!this.switchTabbar" :value="tabActive"> -->
		<van-tabbar v-if="false" :value="tabActive">
			<van-tabbar-item name="home" icon="home-o" to="/main/home">首页</van-tabbar-item>
			<van-tabbar-item name="work" icon="apps-o" to="/main/work">工作台</van-tabbar-item>
			<van-tabbar-item name="wait" icon="friends-o" to="/main/wait">待我审批</van-tabbar-item>
			<van-tabbar-item name="apply" icon="user-o" to="/main/apply">我发起的</van-tabbar-item>
			<van-tabbar-item name="personalHome" icon="user-circle-o" to="/main/personalHome">个人中心</van-tabbar-item>
		</van-tabbar>
		<!-- <van-tabbar v-if="this.switchTabbar && !this.hideTabbar" :value="tabActive"> -->
		<van-tabbar v-if="!hideTabbar" :value="tabActive">
			<van-tabbar-item name="test" icon="user-circle-o" to="/test/index">个人工作台</van-tabbar-item>
      <van-tabbar-item name="capabilitymarket" icon="bag-o" to="/test/capabilitymarket">能力市场</van-tabbar-item>
      <van-tabbar-item name="myapproval" icon="records" to="/test/myapproval" v-if="$store.getters.phone=='18908671899'">我的审核</van-tabbar-item>
      <van-tabbar-item name="abilityassistant" icon="manager-o" to="/test/abilityassistant">
        数字分身
        <span class="badge" v-if="toContactIdUnread > 0">{{ toContactIdUnread }}</span>
      </van-tabbar-item>
<!--			<van-tabbar-item name="chat" icon="comment-o" to="/coordination/chat">聊天</van-tabbar-item>-->
<!--			<van-tabbar-item name="contact" icon="friends-o" to="/coordination/contact">联系人</van-tabbar-item>-->
			<van-tabbar-item name="myHome" icon="user-o" to="/coordination/myHome">我</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import 'vant/lib/tabbar-item/index.less'
  import Vue from "vue";
  import mqHandler from "./chat/util/mqHandler";
  import { postAction } from '@/api'
	export default {
		name: "main-page",
		watch: {},
		computed: {
			// 获取图标资源
			getTabIconSrc() {
				return (item, active) => {
					let img = active ? item.active : item.normal;
					return 'static/img/main/' + img;
				}
			},
			tabActive() {
				let name = this.$route.path == '/coordination/chat' ? 'chat' : this.$store.getters.pageActive
				name = this.$route.path == '/coordination/contact' ? 'contact' : name
				name = this.$route.path == '/coordination/myHome' ? 'myHome' : name
				name = this.$route.path == '/test/index' ? 'test' : name
        name = this.$route.path == '/test/capabilitymarket' ? 'capabilitymarket' : name
        name = this.$route.path == '/test/myapproval' ? 'myapproval' : name
        name = this.$route.path == '/test/abilityassistant' ? 'abilityassistant' : name
				// let name = this.$route.path == '/coordination/chat' ? 'chat' : this.$store.getters.pageActive
				// name = this.$route.path == '/coordination/contact' ? 'contact' : name
				return name
			},
			// switchTabbar() {
			// 	return this.$route.path.includes("/coordination/") ? true : false;
			// },
			hideTabbar() {
				return this.$route.path.includes("/coordination/createGroup") || this.$route.path.includes("/coordination/myHome/") || this.$route.path.includes("/coordination/chat/")  ? true : false;
			}
		},
		data() {
			return {
				active: 0,
        toContactIdUnread: 0
			};
		},
		methods: {
      getDigitalUnread() {
        postAction('/sys/chat/bot/getBot', {
          userId: this.$store.getters.userid
        }).then((res) => {
          this.toContactId = res.result[0].id
          this.gettoContactIdUnread()
        })
      },
      gettoContactIdUnread() {
        //跟据sender_id获取未读消息数
        postAction('/conversation/getUnreadMessageCount', {
          senderId: this.toContactId
        }).then((res) => {
          if (res.code === 200) {
            this.toContactIdUnread = res.result
          }
        })
      }
    },
		mounted() {
			console.log("-----------main------------")
      this.getDigitalUnread();
		},
    created() {
      if(!this.$store.getters.mqClient){
        console.log("创建mq连接:")
        mqHandler.connect();
      }
      Vue.prototype.$bus.$on('message', this.gettoContactIdUnread)
      Vue.prototype.$bus.$on('chanMessageRead', this.gettoContactIdUnread)
    },
    beforeDestroy(){
      Vue.prototype.$bus.$off('message', this.gettoContactIdUnread);
      Vue.prototype.$bus.$off('chanMessageRead', this.gettoContactIdUnread);
    },
  }
</script>

<style scoped>
.badge {
  top: 22px;
  position: absolute;
  background-color: #ff3b30;
  color: white;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 10px;
  flex-shrink: 0;
}
	.tab-txt {
		text-align: center;
		margin-top: -2px;
	}

	.main-router-view {
		height: calc(100vh - 50px);
		overflow-y: auto;
		box-sizing: border-box;
		background-color: #f8f8f8;
	}

	.icon-img {
		margin-bottom: -1px;
		height: 25px;
	}

	.van-tabbar {
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		border-top: 1px solid #f0f0f0;
	}

	.van-tabbar-item--active {
		color: #26B1A1 !important;
	}

	.van-tabbar-item__icon .van-icon {
		font-size: 20px;
	}

	.van-tabbar-item__text {
		font-size: 12px;
		margin-top: 2px;
	}
</style>
